<template>
  <div class="body">
    <div class="register-container">
      <h2 class="register-title">Register</h2>
      <el-form class="register-form" ref="registerForm" :model="registerData" :rules="rules">
        <el-form-item class="register-form-item" prop="userName">
          <el-input v-model="registerData.userName" placeholder="用户名"></el-input>
        </el-form-item>
        <br>
        <el-form-item class="register-form-item" prop="password">
          <el-input v-model="registerData.password" placeholder="密码" show-password></el-input>
        </el-form-item>
        <br>
        <el-form-item class="register-form-item" prop="confirmPassword">
          <el-input v-model="registerData.confirmPassword" placeholder="确认密码" show-password></el-input>
        </el-form-item>
        <br>
        <el-form-item class="register-form-item" prop="email">
          <el-input v-model="registerData.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <br>
        <el-form-item class="register-form-item" prop="phone">
          <el-input v-model="registerData.phone" placeholder="电话"></el-input>
        </el-form-item>
        <br>
        <div class="register-error" v-if="errorMessage">{{ errorMessage }}</div>
        <el-button class="register-button" type="primary" @click="register('registerForm')">注册</el-button>
      </el-form>
      <div style="text-align: center; margin-top: 10px;">
        <a href="/login">已有账号?点我登录</a>
      </div>
    </div>
  </div>
</template>

<style>
.body {
  animation: gradientAnimation 10s infinite;
  background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 800% 800%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Arial', sans-serif;
}

.register-container {
  background: #fff;
  width: 400px;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.register-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.register-form {
  display: flex;
  flex-direction: column;
}

.register-form-item {
  margin-bottom: 10px;
}

.register-button {
  margin-top: 20px;
}

.register-error {
  text-align: center;
  color: red;
  margin-top: 10px;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

<script>
export default {
  data(){
    return {
      registerData: {
        userName: '',
        password: '',
        confirmPassword: '',
        email: '',
        phone: ''
      },
      errorMessage: '',
      // 表单规则
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur'}
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入有效的手机号码', trigger: ['blur', 'change'] }
        ]
      }
    }

  },
  methods: {
    register(registerData) {
      this.$refs[registerData].validate((valid) => {
        if (valid) {
          if (this.registerData.password !== this.registerData.confirmPassword) {
            this.errorMessage = '两次输入的密码不一致';
            return;
          }

          this.axios.post('/api/users/register', {
            userName: this.registerData.userName,
            password: this.registerData.password,
            email: this.registerData.email,
            phone: this.registerData.phone
          })
              .then(response => {
                const data = response.data;
                if (data.code === 1000) {
                  this.errorMessage = '';
                  // this.$message({
                  //   message: data.message,
                  //   type: 'success'
                  // });
                  // 注册成功后的处理逻辑
                  this.showLoginConfirmationDialog();
                } else {
                  this.errorMessage = data.message;
                }
              })
              .catch(error => {
                this.errorMessage = '注册失败，请稍后重试';
                console.error(error);
              });
        }
      });


    },
    showLoginConfirmationDialog() {
      this.$alert('注册成功！即将登录！', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${ action }`
          // });
          this.$router.push('/login');
        }
      });
    }
  }
}
</script>
